<template>
	<view class="box">
		<view style="padding-top: 40vh;" v-if="!items[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<view class="boxItem mb20" v-for="(item,index) in items" :key="item.id">
			<view class="flex mb20">
				<view class="name w170">{{name}}单位：</view>
				<view class="value">{{item.inspectionMaintenanceUnitName}}</view>
			</view>
			<view class="flex mb20">
				<view class="name w170">{{name}}时间：</view>
				<view class="value">{{item.inspectionMaintenanceDate | dateStr}}</view>
			</view>
			<view class="flex mb20">
				<view class="name w170">{{name}}负责人：</view>
				<view class="value">{{item.inspectionMaintenancePrName}}</view>
			</view>
			<view class="flex mb20" v-if="item.inspectionMaintenanceContent">
				<view class="name w170">{{name}}内容：</view>
				<view class="value">{{item.inspectionMaintenanceContent}}</view>
			</view>
			<view class="flex mb20">
				<view class="name w170">附件：</view>
				<view class="cob" @click="preview(item.id)">查看</view>
			</view>
			<view class="flex mb20">
				<view class="name w230">下次{{name}}时间：</view>
				<view class="value">{{item.nextInspectionMaintenanceDate | dateStr}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				itemCount: 0,
				name: '检验',
				//请求参数
				param: {
					messageType: '',
					qrCode: '',
					pageIndex: '1',
					pageSize: '20'
				}
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.messageType) {
				this.name = e.messageType == "01" ? "检验" : "保养"
				this.param.messageType = e.messageType
			}
			if (e.qrCode) {
				this.param.qrCode = e.qrCode
			}
		},
		onShow() {
			this.InspectionMaPage()
		},
		onReachBottom() {
			console.log('到底了')
			if (this.items.length < this.itemCount) {
				this.param.pageIndex++
				this.InspectionMaPage()
			}
		},
		filters:{
			dateStr(e){
				return e ? e.slice(0, 10) : ''
			}
		},
		methods: {
			async InspectionMaPage() {
				let {resultValue: res} = await this.request(this.$api.getInspectionMaintenancePageList, this.param, 'GET')
				console.log(this.param)
				if (res) {
					this.items = this.items.concat(res.items)
					this.itemCount = res.itemCount
				}
			},
			//预览附件支持doc, xls, ppt, pdf, docx, xlsx, pptx
			preview(e) {
				console.log(111)
				uni.navigateTo({
					url: './../checkTheAttachment/checkTheAttachment?classify=' + '0503' + '&connectId=' + e
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F5F6F9;
		padding: 28rpx;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
	}

	.grade {
		text-align: center;
		width: 64rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.w170 {
		width: 170rpx;
	}

	.w230 {
		width: 230rpx;
	}

	.w150 {
		width: 150rpx;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.cob {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3473F9;
	}

	.time {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #939EA8;
	}
</style>
